<script setup lang="ts">
import { h, reactive, ref } from 'vue'
import { NSelect, NDataTable, NButton, NModal, NCard } from 'naive-ui'
const optionsRef = ref([
  {
    label: '1',
    value: 1
  },
  {
    label: '2',
    value: 2
  }
])

const columns = reactive([
  {
    title: '序号',
    key: 'index'
  },
  {
    title: '组件A',
    key: 'comp_a',
    render: () =>
      h(
        NSelect,
        {
          options: optionsRef.value,
          style: { width: '200px' }
        },
        {}
      )
  },
  {
    title: '组件B',
    key: 'comp_b',
    render: () =>
      h(NSelect, {
        options: optionsRef.value,
        style: { width: '200px' }
      })
  }
])
const data = ref<any>([])
const handelAdd = () => {
  const item: any = {
    index: data.value.length + 1,
    comp_a: 1,
    comp_b: 2
  }
  data.value.push(item)
}
const showModal_2 = ref(false)
</script>

<template>
  <div>
    <n-card>
      <n-button @click="handelAdd">+</n-button>
      <n-data-table :columns="columns" :data="data"> </n-data-table>
    </n-card>
  </div>

  <n-modal v-model:show="showModal_2"> </n-modal>
</template>

<style scoped></style>
